<template>
  <div class="order1">
    <van-row class="margin-bottom5">
      <van-col span="16" class="sub van-ellipsis">支付时间：{{order.paymentTime}}</van-col>
      <van-col span="8" class="text-right van-ellipsis" style="font-size: 12px;color: #232323">{{order.status.title}}</van-col>
    </van-row>

    <van-row>
      <van-col span="8">
        <van-image
          fit="cover" height="120"
          :src="order.image"
        />
      </van-col>
      <van-col span="16" style="padding-left: 10px;">
        <div class="margin-bottom5 main van-multi-ellipsis--l2">{{order.title}}</div>
        <div class="margin-bottom5 van-ellipsis sub"><van-icon name="shop-o" />{{order.shopName}}</div>
        <div class="margin-bottom5 sub">商品价格：{{order.price}}元&nbsp;&nbsp;数量：{{order.quantity}}</div>
        <div class="margin-bottom5 sub">支付金额：{{order.paymentAmount}}元</div>
        <div class="sub">订单编号：{{order.tradeId}}</div>
      </van-col>
    </van-row>
    <van-divider />
    <div class="main"><van-icon name="points" />预计返112.2元</div>
    <div class="main">已确认收货，预计2020年04月05日到账</div>
  </div>
</template>

<script>
import { Image, Col, Row, Divider, Icon } from "vant";
export default {
  name: "Order1",
  components: {
    [Image.name]: Image,
    [Col.name]: Col,
    [Row.name]: Row,
    [Divider.name]: Divider,
    [Icon.name]: Icon
  },
  props: {
    order: Object
  }
};
</script>

<style scoped>
.order1 {
  padding: 10px;
}
.text-right {
  text-align: right;
}

.main {
  color: #232323;
  font-size: 13px;
}

.sub {
  color: #aaa;
  font-size: 12px;
}

.margin-bottom5 {
  margin-bottom: 5px;
}

.van-divider {
  margin: 10px 0;
}
</style>